<meta charset="UTF-8"/>
//任务3：简易图片轮播效果制作<hr/>
<button id="b1" onclick="g1()" style="color:red">1</button>
<button id="b2" onclick="g2()">2</button>
<button id="b3" onclick="g3()">3</button>
<button id="b4" onclick="g4()">4</button>
<button id="b5" onclick="g5()">5</button>
<button id="bd" onclick="gd()">放大</button>
<button id="bx" onclick="gx()">缩小</button>
<button id="bo" onclick="go()">复原</button>
<button id="bz" onclick="gz()">旋转</button>
<button id="bp" onclick="gp()">上一张</button>
<button id="bn" onclick="gn()">下一张</button>
<hr/>
<img width="400" id="tp" style="transition:all 1s"  src="1.jpg"/>
<script>
    var deg=0;aa=1;
    function gn(params) {
        if(aa==1){g2();}
        else if(aa==2){g3();}
        else if(aa==3){g4();}
        else if(aa==4){g5();}
        else if(aa==5){g1();}
    }
    function gp(params) {
        if(aa==1){g5();}
        else if(aa==2){g1();}
        else if(aa==3){g2();}
        else if(aa==4){g3();}
        else if(aa==5){g4();}
    }
    function clear(params) {
        b1.style.color="";
        b2.style.color="";
        b3.style.color="";
        b4.style.color="";
        b5.style.color="";
    }
    function g1(params) {
        clear();
        tp.src="1.jpg";
        aa=1;
        b1.style.color="red";
    }
    function g2(params) {
        clear();
        tp.src="2.jpg";
        aa=2;
        b2.style.color="red";
    }
    function g3(params) {
        clear();
        tp.src="3.jpg";
        aa=3;
        b3.style.color="red";
    }
    function g4(params) {
        clear();
        tp.src="4.jpg";
        aa=4;
        b4.style.color="red";
    }
    function g5(params) {
        clear();
        tp.src="5.jpg";
        aa=5;
        b5.style.color="red";
    }
    function gd(params) {
        tp.width=tp.width*1.1;
    }
    function gx(params) {
        tp.width=tp.width*0.9;
    }
    function go(params) {
        tp.width="400";
        tp.style.transform="rotate(0)";
    }
    function gz(params) {
        deg+=90;
        tp.style.transform="rotate("+deg+"deg)";
    }
</script>